<script lang="ts" setup>
import { computed, inject, ref } from 'vue';

interface InputProps {
	type?: string;
	modelValue?: string;
	maxlength?: number;
	placeholder?: string;
	width?: string;
	shape?: string;
}

withDefaults(defineProps<InputProps>(), {
	type: 'text',
	shape: 'round'
});
const emit = defineEmits(['update:modelValue']);

const formItemProps = inject<any>('formItemProps', {});

const handleInput = (event: any) => {
	console.log(event.detail.value);
	emit('update:modelValue', event.detail.value);
};

const classNames = computed(() => {
	return ['um-input', 'um-input-round'];
});
</script>

<template>
	<view :class="classNames">
		<input class="input" :placeholder="placeholder" />
		<!-- <input :value="modelValue" @input="handleInput" :style="{ width: width }" :type="type" :maxlength="maxlength" :placeholder="placeholder" /> -->
		<!-- <input :value="modelValue" @input="handleInput" :style="{ width: width }" :type="type" :maxlength="maxlength" :placeholder="placeholder" v-if="!formItemProps?.arrow" />
		<um-text v-else style="color: #999999; line-height: 28rpx; font-size: 28rpx">{{ modelValue || placeholder }}</um-text> -->
	</view>
</template>

<style lang="scss" scoped>
.um-input {
	display: flex;
	align-items: center;
	border: 1px solid #bbbbbb;

	&-round {
		border-radius: 200rpx;
		overflow: hidden;
	}

	.input {
		border: none;
		width: 100%;
		background-color: #fff;
		height: 60rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		padding-left: 12px;
	}
}
</style>
